@if(isset($permissionGroup))
    @foreach($permissionGroup as $permission)
        <div class="col-xs-4" >
            <div class="permission" id="permission-{{ $permission['name'] }}">
                @if(isset($user))
                    @php
                        $userHasPermission = $user->permissions->pluck('name')->all();
                        $userHasPermission = empty($userHasPermission) ? [] : $userHasPermission ;
                    @endphp
                    <label class="permission-title">{{ $permission['cn_name'] }}<span class="pull-right"><input type="checkbox" {{  in_array($permission['name'],$userHasPermission) ? 'checked' :'' }} class="flat-red" value="{{ $permission['name'] }}" data-level="{{ $permission['level'] }}" data-permission-level="one" data-pid="{{ $permission['pid'] }}" data-show=0 data-id="{{ $permission['id'] }}" name="permissions[]"></span> </label>
                @else
                    <label class="permission-title">{{ $permission['cn_name'] }}<span class="pull-right"><input type="checkbox" {{ $role->hasPermissionTo($permission['name']) ? 'checked' :'' }} class="flat-red" value="{{ $permission['name'] }}" data-level="{{ $permission['level'] }}" data-permission-level="one" data-pid="{{ $permission['pid'] }}" data-show=0 data-id="{{ $permission['id'] }}" name="permissions[]"></span> </label>
                @endif
                @if(isset($permission['child']))
                    @foreach( $permission['child'] as $perL2 )
                        <div class="permission-level-2">
                            <div id="permission-{{ $perL2['name'] }}" class="build">

                                @if(isset($user))
                                    <label class="permission-level-2-title">{{ $perL2['cn_name'] }}<span class="pull-right"><input data-permission-level="two" {{ in_array($perL2['name'],$userHasPermission) ? 'checked' :'' }} value="{{ $perL2['name'] }}" data-level="{{ $perL2['level'] }}" data-show="0" data-pid="{{ $perL2['pid'] }}" data-id="{{ $perL2['id'] }}" class="flat-red" name="permissions[]" type="checkbox"></span> </label>
                                @else
                                    <label class="permission-level-2-title">{{ $perL2['cn_name'] }}<span class="pull-right"><input data-permission-level="two" {{ $role->hasPermissionTo($perL2['name']) ? 'checked' :'' }} value="{{ $perL2['name'] }}" data-level="{{ $perL2['level'] }}" data-show="0" data-pid="{{ $perL2['pid'] }}" data-id="{{ $perL2['id'] }}" class="flat-red" name="permissions[]" type="checkbox"></span> </label>
                                @endif
                                <div class="permission-level-3 form-group clearfix">
                                    @if(isset($perL2['child']))
                                        @foreach( $perL2['child'] as $perL3)
                                            <div class="checkbox pull-left">
                                                @if(isset($user))
                                                    <label><input {{ in_array($perL3['name'],$userHasPermission) ? 'checked' :'' }} data-permission-level="three" data-pid="{{ $perL3['pid'] }}" data-id="{{ $perL3['id'] }}" data-level="{{ $perL3['level'] }}" class="flat-red" name="permissions[]" value="{{ $perL3['name'] }}" type="checkbox">{{ $perL3['cn_name'] }}</label>
                                                @else
                                                    <label><input {{ $role->hasPermissionTo($perL3['name']) ? 'checked' :'' }} data-permission-level="three" data-pid="{{ $perL3['pid'] }}" data-id="{{ $perL3['id'] }}" data-level="{{ $perL3['level'] }}" class="flat-red" name="permissions[]" value="{{ $perL3['name'] }}" type="checkbox">{{ $perL3['cn_name'] }}</label>
                                                @endif
                                            </div>
                                        @endforeach
                                    @endif
                                </div>

                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    @endforeach
@endif

@section('Style')
    <style type="text/css">
        .checkbox + .checkbox {margin-top:0px;}
        .permission { margin-bottom: 5px;background-color: #ecf0f5;}
        .permission-title {background-color:#3c8dbc;color:#fff;padding: 5px; width:100%; margin-bottom: 0px;}
        .permission-level-2 {background-color:#fff;}
        .permission-level-2-title {background-color:#ebeaeb;padding: 5px; width:100%;}
        .permission-level-3 {background-color:#ebeaeb;}
        .build {border-bottom:solid 1px #080808; }
        .build > label {border-bottom:solid 1px #fff;margin-bottom:0px; }
        .build  .form-group {margin-bottom:0px; }
        .checkbox {padding: 5px;margin: 0px;}
    </style>
@endsection

@section('JavascriptScript')
    $('input[name="permissions[]"]').on('change',function(){
        var changeId = $(this).data('id');
        var changePid = $(this).data('pid');
        var theLevel = $(this).data('level');
        if(changePid != 0){
            var changePPid = $('input[data-id='+ changePid +']').data('pid');
        }

        if($(this).prop('checked')){
            if(changePPid != undefined){
            $('input[data-id='+ changePPid +']').prop('checked',true)
            }
            if(changePid != 0){
            $('input[data-id='+ changePid +']').prop('checked',true)
            }
        }else{
            var pplen = $('input[data-pid='+ changePPid +']').filter('input:checkbox:checked').length;
            var plen = $('input[data-pid='+ changePid +']').filter('input:checkbox:checked').length;
            if(theLevel > 2){
                if(plen == 0){
                    $('input[data-id='+ changePid +']').prop('checked',false);
                    if(pplen == 1 ){
                        $('input[data-id='+ changePPid +']').prop('checked',false);
                    }
                }

            }
            if(theLevel == 2){
                if(plen == 0){
                    $('input[data-id='+ changePid +']').prop('checked',false)
                }
                $('input[data-pid='+ changeId +']').prop('checked',false);
            }

            if(theLevel < 2){
                $('input[data-level="2"]').prop('checked',false);
                $('input[data-level="3"]').prop('checked',false);
            }
        }
    });
@endsection

